<template>
  <div class="plan-detail">
    <PageTemplate>
      <div slot="content">
         <el-form
          :model="laboratory"
          label-position="right"
          label-width="150px"
          class="page-edit-colllapse-form"
          ref="laboratory">
          <el-row>
            <el-col :span="24">
              <el-form-item label="实验室名称" prop="laboratoryName">
                  <span>{{laboratory.laboratoryName}}</span>
              </el-form-item>
            </el-col>

            <el-col :span="22">
              <el-form-item label="项目阶段" prop="phase">
                  <el-table
                  class="table"
                  border
                  ref="multipleTable"
                  :data="phases"
                  tooltip-effect="dark"
                  style="width: 100%"
                  :show-overflow-tooltip="true"
                  :header-cell-style="{background:tableHeaderBGC}"
                  >
                  <el-table-column type="index" :label="$t('cm.no')" align="center" width="60" fixed></el-table-column>
                  <el-table-column prop="phaseName" label="阶段" align="center"></el-table-column>
                  <el-table-column prop="plannedStartTime" label="计划开始时间" align="center"></el-table-column>
                  <el-table-column prop="plannedEndTime" label="计划结束时间" align="center"></el-table-column>
                  <el-table-column prop="leaderUserName" label="负责人" align="center"></el-table-column>
                  <el-table-column prop="personsStr" label="参与人员" align="center"></el-table-column>
                  <el-table-column prop="progressRemark" label="当前进展" align="center"></el-table-column>
                  <el-table-column prop="progressQuestion" label="当前问题" align="center"></el-table-column>
                  <el-table-column :label="$t('cm.operate')" prop="statussss" fixed="right" align="center" width="140">
                    <template slot-scope="scope">
                      <ListBtn :options="btns" :row-data="scope.row" @triggerListBtn="handleListBtn"></ListBtn>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
             <el-col :span="24">
              <el-form-item label="附件" prop="fileName">
                <span>{{laboratory.fileName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="back">
            {{$t('cm.return')}}
          </el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import {COMMON} from '@/utils/commonUtil'
import api_sri from '@/api/api_sri'
import ListBtn from '@/components/btn/ListBtn'
export default {
  components: {
    PageTemplate,
    ListBtn 
  },
  data () {
    return {
      laboratory: {},
      phases:[],
      btns: [
      {
        value: 'look',
        label: 'cm.look'
      },
     ],
    }
  },
  watch: {
    
  },
  computed: {
      ...mapState({
        tableHeaderBGC: state => state.common.tableHeaderBGC
      }),
  },
  created () {
      this.getDetail();
  },
  methods: {
    //获取详情
      getDetail(){
      api_sri.sriGainLaboratoryAnnualPlanInfo({
         id:this.$router.history.current.params.id
       }, result => {
        if (result.code === Constant.RT_SUCCESS) {
           this.laboratory = result.data.laboratoryAnnualPlan
           this.phases = result.data.laboratoryAnnualPlanPhases

               //处理计划明细参与人员
               this.phases = this.phases.map(item=>{
               item.personsStr = COMMON.arrToStr(item.persons,"peopleName")
                  return item
               })
               console.log('this.phases', this.phases)

              //已有附件
              if(this.laboratory.fileId){
                this.laboratory.fileList =[
                    {
                      name:this.laboratory.fileName,
                      id:this.laboratory.fileId
                    }
                  ]
              }
        } else {
          ALERT.error(result.msg)
        }
        
      })

    },
    handleListBtn({btn,row}){
      if(btn==="look"){//查看
        COMMON.routerTo(Constant.ROUTE_SRI_GAIN_ALP_PROGRESS_LOOK.index, this.$router, { id: row.id })
      }
    },
    //返回
    back(){
      this.$router.go(-1);//返回上一层
    },
   
  },
}
</script>

<style lang="scss">
.plan-detail{
   .el-table__header,
  .el-table__body,
  .el-table__footer{
      width: 100% !important;
  }
   .el-form-item__content>span:empty:before{
      content:"--"
    }
  .el-form{
    background: #fff;
    padding-top: 30px;
  }
}
</style>
